.evaluation-page {
  .search-form {
    margin-bottom: 24px;
  }

  .evaluation-card {
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .ant-card-body {
      padding: 20px;
      background: linear-gradient(to bottom, #ffffff, #f8f9fa);
    }

    .user-avatar {
      position: relative;
      
      .ant-avatar {
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        &.default-avatar {
          background: #1890ff;
        }
      }
    }

    .card-title {
      width: 100%;
      justify-content: space-between;

      .user-name {
        font-size: 16px;
      }

      .rate {
        font-size: 14px;
        color: #ffd700;
      }
    }

    .card-content {
      width: 100%;
      margin-top: 12px;

      .course-title {
        font-size: 14px;
        color: #1890ff;
        font-weight: 500;
      }

      .booking-time {
        font-size: 13px;
      }

      .comment-text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
        color: #666;
        margin: 8px 0;
        line-height: 1.5;
      }

      .rating-time {
        font-size: 12px;
        color: #999;
        border-top: 1px solid #f0f0f0;
        padding-top: 8px;
        margin-top: 4px;
      }
    }
  }

  .detail-drawer {
    .ant-drawer-body {
      background: #f8f9fa;
    }

    .detail-card {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      margin-bottom: 16px;

      .ant-avatar {
        border: 3px solid #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        &.default-avatar {
          background: #1890ff;
        }
      }

      .user-info {
        .user-name {
          font-size: 18px;
        }

        .rate {
          color: #ffd700;
        }
      }

      .description-label {
        color: #1890ff;
      }

      .comment-content {
        font-size: 14px;
        line-height: 1.8;
      }
    }
  }
}
